import React, {Component} from 'react';
import cssModule from './chat.module.less'

import {Swiper, SwiperSlide} from 'swiper/react';
import 'swiper/swiper.less';

import Swiper1 from "./Swiper1/Swiper1";

class Chat extends Component {
    state = {
        tabs: {
            index: 0,
            name: "onChat"
        },
        Swiper:"",
        SwiperOption:{
            allowTouchMove:true
        }
    }

    // 顶部按钮点击事件
    onSelect = (type) => {
        if (this.state.tabs.name === type) return
        this.setState({
            tabs: {
                index: type === 'onChat' ? 0 : 1,
                name: type
            }
        })
        this.state.Swiper.slideTo(type === 'onChat' ? 0 : 1,500,false)  // 改变页数并切换
    }

    // swiper 滑动事件
    SwiperChang(e) {
        this.setState({
            tabs: {
                index: e.activeIndex,
                name: e.activeIndex === 0 ? 'onChat' : 'onInteraction'
            }
        })
    }
    // 改变Swiper是否可滑动
    ChnageSwiperOption(type,value){
        this.setState({
            SwiperOption:{
                [type]:value
            }
        })
    }
    componentDidMount() {

    }

    render() {
        return (
            <div>
                {/*顶部导航*/}
                <div className='nav'>
                    <section className='nav-left'>
                        <div className={`nav-btn ${this.state.tabs.index === 0 ? 'Selected' : ""}`}
                             onClick={() => this.onSelect('onChat')}>聊天
                        </div>
                        <div className={`nav-btn ${this.state.tabs.index === 1 ? 'Selected' : ""}`}
                             onClick={() => this.onSelect('onInteraction')}>互动
                        </div>
                    </section>
                    <i className='iconfont'>&#xe7c4;</i>
                </div>
                {/*swiper组件*/}
                <Swiper
                    initialSlide={this.state.tabs.index}
                    direction='horizontal'
                    allowTouchMove={this.state.SwiperOption.allowTouchMove}
                    spaceBetween={50}
                    slidesPerView={1}
                    onSlideChange={(e) => this.SwiperChang(e)}
                    onSwiper={(swiper) => this.setState({Swiper:swiper})}

                >
                    <SwiperSlide className='SwiperPage'>
                        <Swiper1/>
                    </SwiperSlide>
                    <SwiperSlide className='SwiperPage'>Slide 2</SwiperSlide>
                </Swiper>
            </div>
        );
    }
}

export default Chat;